<template>
  <div class="scenic-point-crud-container">
    <div class="scenic-point-crud-header">
      <div class="header-actions">
        <el-button type="primary" plain size="small" @click="goBack">
          <el-icon><Back /></el-icon> 返回首页
        </el-button>
      </div>
      <h1>景点要素管理</h1>
      <p>管理景点要素信息的增删改查操作</p>
    </div>

    <!-- 主要内容区域 -->
    <el-row :gutter="20">
      <!-- 左侧地图区域 -->
      <el-col :span="16">
        <el-card class="map-card">
          <div id="scenicPointMapView" class="map-container"></div>

          <!-- 状态指示器 - 添加模式 -->
          <div class="status-indicator" v-if="isAddingMode">
            <div class="pulse-dot"></div>
            <span>请在地图上点击添加景点位置</span>
            <el-button size="small" @click="cancelAddingMode" class="cancel-btn">取消</el-button>
          </div>
        </el-card>
      </el-col>

      <!-- 右侧功能区域 -->
      <el-col :span="8">
        <!-- 操作面板 -->
        <el-card class="action-card">
          <template #header>
            <div class="card-header">
              <span>操作面板</span>
            </div>
          </template>

          <div class="action-buttons">
            <el-button type="primary" @click="startAddingMode">
              <el-icon><Plus /></el-icon>添加景点
            </el-button>
            <el-button type="warning" :disabled="!selectedFeatureId" @click="openEditForm">
              <el-icon><Edit /></el-icon>编辑景点
            </el-button>
            <el-button type="danger" :disabled="!selectedFeatureId" @click="deleteFeature">
              <el-icon><Delete /></el-icon>删除景点
            </el-button>
          </div>

          <div v-if="selectedFeatureId" class="selected-feature-info">
            <h3>已选择: {{ selectedFeatureName }}</h3>
            <p v-if="selectedFeatureType">类型: {{ selectedFeatureType }}</p>
          </div>
        </el-card>

        <!-- 景点列表 -->
        <el-card class="feature-list-card">
          <template #header>
            <div class="card-header">
              <span>景点列表</span>
              <el-input
                v-model="searchQuery"
                placeholder="搜索景点名称"
                clearable
                class="search-input"
              >
                <template #prefix>
                  <el-icon><Search /></el-icon>
                </template>
              </el-input>
            </div>
          </template>

          <el-table
            :data="tableData"
            style="width: 100%"
            v-loading="loading"
            @row-click="handleRowClick"
          >
            <el-table-column prop="attributes.OBJECTID" label="ID" width="80" />
            <el-table-column prop="attributes.ScenicName" label="景点名称" />
            <el-table-column prop="attributes.ScenicType" label="景点类型" />
            <el-table-column prop="attributes.Status" label="状态" width="100">
              <template #default="scope">
                <el-tag :type="getStatusTagType(scope.row.attributes.Status)">
                  {{ scope.row.attributes.Status || '未知' }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="150">
              <template #default="scope">
                <el-button size="small" type="primary" @click.stop="viewFeatureDetails(scope.row)">
                  查看
                </el-button>
                <el-button size="small" type="warning" @click.stop="editFeature(scope.row)">
                  编辑
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>

  <!-- 添加/编辑表单抽屉 -->
  <el-drawer
    v-model="showFormDrawer"
    :title="isEditing ? '编辑景点' : '添加景点'"
    direction="rtl"
    size="500px"
    :before-close="handleFormClose"
  >
    <el-form :model="formData" label-position="top" class="feature-form" ref="formRef">
      <!-- 基本信息部分 -->
      <el-divider content-position="left">基本信息</el-divider>

      <el-form-item
        label="景点名称"
        prop="ScenicName"
        :rules="[{ required: true, message: '请输入景点名称', trigger: 'blur' }]"
      >
        <el-input v-model="formData.ScenicName" placeholder="请输入景点名称"></el-input>
      </el-form-item>

      <el-form-item
        label="景点类型"
        prop="ScenicType"
        :rules="[{ required: true, message: '请选择景点类型', trigger: 'change' }]"
      >
        <el-select v-model="formData.ScenicType" placeholder="请选择景点类型" style="width: 100%">
          <el-option label="自然景观" value="自然景观"></el-option>
          <el-option label="人文景观" value="人文景观"></el-option>
          <el-option label="历史遗迹" value="历史遗迹"></el-option>
          <el-option label="休闲娱乐" value="休闲娱乐"></el-option>
          <el-option label="观景台" value="观景台"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="景点描述" prop="Description">
        <el-input
          v-model="formData.Description"
          type="textarea"
          rows="4"
          placeholder="请输入景点描述"
        ></el-input>
      </el-form-item>

      <el-form-item label="状态" prop="Status">
        <el-select v-model="formData.Status" placeholder="请选择状态" style="width: 100%">
          <el-option label="正常开放" value="正常开放"></el-option>
          <el-option label="维护中" value="维护中"></el-option>
          <el-option label="暂停开放" value="暂停开放"></el-option>
          <el-option label="季节性关闭" value="季节性关闭"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="价格信息" prop="Price">
        <el-input v-model="formData.Price" placeholder="请输入价格信息，为空表示免费">
          <template #append>元</template>
        </el-input>
      </el-form-item>

      <el-form-item label="所属保护区" prop="OwnerScenic">
        <el-select v-model="formData.OwnerScenic" placeholder="请选择所属保护区" style="width: 100%">
          <el-option label="胶南灵山岛保护区" value="胶南灵山岛保护区"></el-option>
          <el-option label="大公岛保护区" value="大公岛保护区"></el-option>
          <el-option label="大泽山保护区" value="大泽山保护区"></el-option>
          <el-option label="崂山保护区" value="崂山保护区"></el-option>
          <el-option label="胶州艾山保护区" value="胶州艾山保护区"></el-option>
          <el-option label="马山保护区" value="马山保护区"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="景点图片" prop="PhotoBase64">
        <!-- 如果有照片数据，显示照片 -->
        <div v-if="formData.PhotoBase64 && formData.PhotoBase64.length > 0" class="existing-photo">
          <el-image
            style="width: 100%; max-height: 200px"
            :src="formData.PhotoBase64"
            fit="contain"
          ></el-image>
          <el-button type="danger" size="small" @click="handlePhotoRemove" class="remove-photo-btn">
            删除照片
          </el-button>
        </div>
        <!-- 如果没有照片数据，显示上传组件 -->
        <el-upload
          v-else
          class="upload-demo"
          action="#"
          list-type="picture-card"
          :auto-upload="false"
          :limit="1"
          :on-change="handlePhotoChange"
          :on-remove="handlePhotoRemove"
        >
          <el-icon><Plus /></el-icon>
        </el-upload>
      </el-form-item>

      <el-form-item label="维护数据" prop="MaintanceDataJson">
        <el-input
          v-model="formData.MaintanceDataJson"
          type="textarea"
          rows="3"
          placeholder="请输入维护数据JSON格式（可选）"
        ></el-input>
      </el-form-item>

      <div class="form-actions">
        <el-button @click="showFormDrawer = false">取消</el-button>
        <el-button type="primary" @click="saveFeature">保存</el-button>
      </div>
    </el-form>
  </el-drawer>

  <!-- 详情抽屉 -->
  <el-drawer v-model="showDetailsDrawer" title="景点详情" direction="rtl" size="500px">
    <div v-if="currentFeature" class="feature-details">
      <el-descriptions :column="1" border>
        <el-descriptions-item label="景点名称">
          {{ currentFeature.attributes.ScenicName || '无' }}
        </el-descriptions-item>

        <el-descriptions-item label="景点类型">
          <el-tag :type="getTypeTagType(currentFeature.attributes.ScenicType)">
            {{ currentFeature.attributes.ScenicType || '无' }}
          </el-tag>
        </el-descriptions-item>

        <el-descriptions-item label="景点描述">
          {{ currentFeature.attributes.Description || '无描述信息' }}
        </el-descriptions-item>

        <el-descriptions-item label="状态">
          <el-tag :type="getStatusTagType(currentFeature.attributes.Status)">
            {{ currentFeature.attributes.Status || '未知' }}
          </el-tag>
        </el-descriptions-item>

        <el-descriptions-item label="价格信息">
          {{ currentFeature.attributes.Price ? currentFeature.attributes.Price + '元' : '免费' }}
        </el-descriptions-item>

        <el-descriptions-item label="所属景区">
          {{ currentFeature.attributes.OwnerScenic || '无' }}
        </el-descriptions-item>

        <el-descriptions-item label="维护数据" v-if="currentFeature.attributes.MaintanceDataJson">
          <pre>{{ currentFeature.attributes.MaintanceDataJson }}</pre>
        </el-descriptions-item>

        <el-descriptions-item label="景点图片" v-if="currentFeature.attributes.PhotoBase64">
          <el-image
            style="width: 100%; max-height: 300px"
            :src="currentFeature.attributes.PhotoBase64"
            fit="contain"
          ></el-image>
        </el-descriptions-item>
      </el-descriptions>

      <div class="details-actions">
        <el-button type="primary" @click="editFeature(currentFeature)">
          <el-icon><Edit /></el-icon> 编辑景点
        </el-button>
      </div>
    </div>
    <div v-else class="no-feature-selected">
      <el-empty description="没有选中景点"></el-empty>
    </div>
  </el-drawer>
</template>

<script setup lang="ts">
// 在文件顶部添加类型声明
declare global {
  interface Window {
    _tempFeatures: __esri.Graphic[]
  }
}
import { ref, onMounted, watch, reactive } from 'vue'
import { Plus, Edit, Delete, Check, Close, Search, Back } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance } from 'element-plus'
import { useUserStore } from '@/stores/userStore'
import { useRouter, useRoute } from 'vue-router'
import Map from '@arcgis/core/Map'
import MapView from '@arcgis/core/views/MapView'
import FeatureLayer from '@arcgis/core/layers/FeatureLayer'
import Graphic from '@arcgis/core/Graphic'
import Point from '@arcgis/core/geometry/Point'
import SimpleMarkerSymbol from '@arcgis/core/symbols/SimpleMarkerSymbol'
import { gaodeLayer } from '@/utils/GaoDeBaseLayer'

// 检查用户权限
const userStore = useUserStore()
const router = useRouter()
const route = useRoute()

// 如果不是管理员，重定向到首页
if (!userStore.isAdmin) {
  ElMessage.warning('您没有权限访问该页面')
  router.push('/')
}

// 地图和图层
let view: __esri.MapView
let featureLayer: __esri.FeatureLayer
let newPointGeometry: Point | null = null

// 状态变量
const loading = ref(true)
const searchQuery = ref('')
const tableData = ref<any[]>([])
const selectedFeatureId = ref<number | null>(null)
const selectedFeatureName = ref('')
const selectedFeatureType = ref('')
const isAddingMode = ref(false)
const showFormDrawer = ref(false)
const showDetailsDrawer = ref(false)
const isEditing = ref(false)
const currentFeature = ref<any>(null)
const formRef = ref<FormInstance>()

// 表单数据
const formData = reactive({
  ScenicName: '',
  ScenicType: '',
  Description: '',
  Status: '',
  PhotoBase64: '',
  OwnerScenic: '',
  MaintanceDataJson: '',
  Price: '',
})

// 从要素中提取属性数据
const extractFeatureData = (feature: any) => {
  if (!feature || !feature.attributes) return null

  return {
    attributes: { ...feature.attributes },
    // 存储坐标信息，但不存储完整的geometry对象
    geometryInfo: feature.geometry
      ? {
          x: feature.geometry.x,
          y: feature.geometry.y,
          type: feature.geometry.type,
        }
      : null,
  }
}

// 根据类型获取标签类型
const getTypeTagType = (type: string) => {
  switch (type) {
    case '自然景观':
      return 'success'
    case '人文景观':
      return 'primary'
    case '历史遗迹':
      return 'warning'
    case '休闲娱乐':
      return 'info'
    case '观景台':
      return 'danger'
    default:
      return 'info'
  }
}

// 根据状态获取标签类型
const getStatusTagType = (status: string) => {
  switch (status) {
    case '正常开放':
      return 'success'
    case '维护中':
      return 'warning'
    case '暂停开放':
      return 'danger'
    case '季节性关闭':
      return 'info'
    default:
      return 'info'
  }
}

// 查询景点数据
const queryFeatures = async () => {
  if (!featureLayer) return

  loading.value = true
  try {
    // 创建查询
    const query = featureLayer.createQuery()

    // 基础查询条件
    let whereClause = '1=1'

    // 如果有搜索条件，添加到查询中
    if (searchQuery.value) {
      whereClause += ` AND ScenicName LIKE '%${searchQuery.value}%'`
    }

    query.where = whereClause
    query.outFields = ['*']

    // 执行查询
    const result = await featureLayer.queryFeatures(query)

    // 存储原始的ESRI要素对象到非响应式变量中
    window._tempFeatures = result.features

    // 将要素ID和属性数据存储到响应式变量中
    tableData.value = result.features.map((feature, index) => ({
      // 存储原始要素的索引，供后续使用
      _index: index,
      // 复制属性数据
      attributes: { ...feature.attributes },
    }))
  } catch (error) {
    console.error('查询景点数据失败', error)
    tableData.value = []
  } finally {
    loading.value = false
  }
}

// 监听搜索条件变化
watch(searchQuery, () => {
  queryFeatures()
})

// 初始化地图
const initMap = async () => {
  // 创建地图实例
  const map = new Map({
    basemap: {
      baseLayers: [gaodeLayer],
    },
  })

  // 创建地图视图
  view = new MapView({
    container: 'scenicPointMapView',
    map: map,
    center: [120.179558, 35.765965], // 默认中心点
    zoom: 12,
    popup: {
      dockEnabled: true,
      dockOptions: {
        buttonEnabled: false,
        breakpoint: false,
      },
    },
  })

  // 创建要素图层
  featureLayer = new FeatureLayer({
    url: 'https://services8.arcgis.com/hvBaJk0FLVU4yP47/arcgis/rest/services/ScenicPointLayer/FeatureServer/0',
    outFields: ['*'],
    popupEnabled: false,
    renderer: {
      type: 'unique-value',
      field: 'ScenicType',
      defaultSymbol: {
        type: 'simple-marker',
        color: [156, 156, 156],
        size: 12,
        outline: {
          color: [255, 255, 255],
          width: 2,
        },
      },
      uniqueValueInfos: [
        {
          value: '自然景观',
          symbol: {
            type: 'simple-marker',
            color: [56, 168, 0],
            size: 12,
            outline: {
              color: [255, 255, 255],
              width: 2,
            },
          },
        },
        {
          value: '人文景观',
          symbol: {
            type: 'simple-marker',
            color: [0, 112, 255],
            size: 12,
            outline: {
              color: [255, 255, 255],
              width: 2,
            },
          },
        },
        {
          value: '历史遗迹',
          symbol: {
            type: 'simple-marker',
            color: [230, 162, 60],
            size: 12,
            outline: {
              color: [255, 255, 255],
              width: 2,
            },
          },
        },
        {
          value: '休闲娱乐',
          symbol: {
            type: 'simple-marker',
            color: [245, 108, 108],
            size: 12,
            outline: {
              color: [255, 255, 255],
              width: 2,
            },
          },
        },
        {
          value: '观景台',
          symbol: {
            type: 'simple-marker',
            color: [144, 147, 153],
            size: 12,
            outline: {
              color: [255, 255, 255],
              width: 2,
            },
          },
        },
      ],
    },
    // 添加标注
    labelingInfo: [
      {
        symbol: {
          type: 'text',
          color: '#333333',
          haloColor: '#ffffff',
          haloSize: 2,
          font: {
            size: 10,
            weight: 'normal',
          },
        },
        labelPlacement: 'above-center',
        labelExpressionInfo: {
          expression: '$feature.ScenicName',
        },
        minScale: 50000,
        maxScale: 0,
      },
    ],
  })

  // 将要素图层添加到地图
  map.add(featureLayer)

  // 添加点击事件监听器
  view.on('click', async (event) => {
    if (isAddingMode.value) {
      // 添加模式下，获取点击位置并打开表单
      newPointGeometry = new Point({
        longitude: event.mapPoint.longitude,
        latitude: event.mapPoint.latitude,
      })

      // 打开创建表单
      isAddingMode.value = false
      isEditing.value = false
      currentFeature.value = null
      resetForm()
      showFormDrawer.value = true

      // 还原鼠标样式
      if (view?.container) {
        ;(view.container as HTMLElement).style.cursor = 'default'
      }
      return
    }

    const hitResults = (await view?.hitTest(event))?.results as __esri.MapViewGraphicHit[]
    const feature = hitResults.find((result) => result.layer?.id === featureLayer?.id)?.graphic

    if (feature) {
      selectedFeatureId.value = feature.attributes.OBJECTID
      selectedFeatureName.value =
        feature.attributes.ScenicName || `景点 #${selectedFeatureId.value}`
      selectedFeatureType.value = feature.attributes.ScenicType || ''

      // 添加高亮效果
      view?.graphics.removeAll()
      const highlightSymbol = new SimpleMarkerSymbol({
        color: [255, 255, 255, 0.8],
        size: 16,
        outline: {
          color: [0, 122, 194],
          width: 3,
        },
      })

      const highlightGraphic = new Graphic({
        geometry: feature.geometry,
        symbol: highlightSymbol,
      })

      view?.graphics.add(highlightGraphic)
    } else {
      // 点击空白区域，取消选择
      selectedFeatureId.value = null
      selectedFeatureName.value = ''
      selectedFeatureType.value = ''
      view?.graphics.removeAll()
    }
  })

  // 等待视图加载完成后查询数据
  await view.when()
  await loadFeatures()
}

// 加载要素数据
const loadFeatures = async () => {
  await queryFeatures()
}

// 开始添加模式
const startAddingMode = () => {
  isAddingMode.value = true
  // 改变鼠标样式
  if (view?.container) {
    ;(view.container as HTMLElement).style.cursor = 'crosshair'
  }
  ElMessage.info('请在地图上点击选择景点位置')
}

// 取消添加模式
const cancelAddingMode = () => {
  isAddingMode.value = false
  newPointGeometry = null
  // 还原鼠标样式
  if (view?.container) {
    ;(view.container as HTMLElement).style.cursor = 'default'
  }
}

// 重置表单
const resetForm = () => {
  Object.keys(formData).forEach((key) => {
    formData[key as keyof typeof formData] = ''
  })
}

// 处理表单关闭
const handleFormClose = (done: () => void) => {
  ElMessageBox.confirm('确认关闭？未保存的数据将丢失。')
    .then(() => {
      resetForm()
      done()
    })
    .catch(() => {
      // 取消关闭
    })
}

// 打开编辑表单
const openEditForm = () => {
  if (!selectedFeatureId.value) {
    ElMessage.warning('请先选择一个景点')
    return
  }

  // 从存储的要素中找到对应的要素
  const feature = window._tempFeatures?.find(
    (f) => f.attributes.OBJECTID === selectedFeatureId.value
  )

  if (feature) {
    editFeature({ attributes: feature.attributes })
  }
}

// 编辑要素
const editFeature = (row: any) => {
  isEditing.value = true
  currentFeature.value = extractFeatureData(row)
  selectedFeatureId.value = row.attributes.OBJECTID

  // 填充表单数据
  Object.keys(formData).forEach((key) => {
    const value = row.attributes[key]
    formData[key as keyof typeof formData] = value || ''
  })

  showFormDrawer.value = true
}

// 查看要素详情
const viewFeatureDetails = (row: any) => {
  currentFeature.value = extractFeatureData(row)
  showDetailsDrawer.value = true
}

// 处理表格行点击
const handleRowClick = (row: any) => {
  selectedFeatureId.value = row.attributes.OBJECTID
  selectedFeatureName.value = row.attributes.ScenicName || `景点 #${selectedFeatureId.value}`
  selectedFeatureType.value = row.attributes.ScenicType || ''

  // 从存储的要素中找到对应的要素进行高亮
  const feature = window._tempFeatures?.find(
    (f) => f.attributes.OBJECTID === selectedFeatureId.value
  )

  if (feature && view) {
    // 添加高亮效果
    view.graphics.removeAll()
    const highlightSymbol = new SimpleMarkerSymbol({
      color: [255, 255, 255, 0.8],
      size: 16,
      outline: {
        color: [0, 122, 194],
        width: 3,
      },
    })

    const highlightGraphic = new Graphic({
      geometry: feature.geometry,
      symbol: highlightSymbol,
    })

    view.graphics.add(highlightGraphic)

    // 缩放到要素
    view.goTo(feature.geometry)
  }
}

// 删除要素
const deleteFeature = async () => {
  if (!selectedFeatureId.value) {
    ElMessage.warning('请先选择一个景点')
    return
  }

  try {
    await ElMessageBox.confirm('确认删除选中的景点吗？此操作不可撤销。', '确认删除', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    })

    if (!featureLayer) {
      ElMessage.error('图层未初始化')
      return
    }

    const deleteFeature = new Graphic({
      attributes: {
        OBJECTID: selectedFeatureId.value,
      },
    })

    const result = await featureLayer.applyEdits({
      deleteFeatures: [deleteFeature],
    })

    if (result.deleteFeatureResults.length > 0) {
      ElMessage.success('景点已删除')
      selectedFeatureId.value = null
      selectedFeatureName.value = ''
      selectedFeatureType.value = ''
      view?.graphics.removeAll()
      await loadFeatures()
    } else {
      ElMessage.error('删除景点失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除景点失败', error)
      ElMessage.error('删除景点失败')
    }
  }
}

// 处理照片上传
const handlePhotoChange = (file: any) => {
  const reader = new FileReader()
  reader.onload = (e) => {
    formData.PhotoBase64 = e.target?.result as string
  }
  reader.readAsDataURL(file.raw)
}

// 处理照片删除
const handlePhotoRemove = () => {
  formData.PhotoBase64 = ''
}

// 保存要素
const saveFeature = async () => {
  if (!formRef.value) return

  // 验证表单
  await formRef.value.validate(async (valid) => {
    if (!valid) {
      ElMessage.error('请填写必填字段')
      return
    }

    try {
      if (!featureLayer) {
        ElMessage.error('图层未初始化')
        return
      }

      // 准备属性数据
      const attributes = { ...formData }

      // 如果照片字段为空字符串，则设置为空
      if (attributes.PhotoBase64 === '') {
        attributes.PhotoBase64 = ''
      }

      // 如果维护数据为空，设置为空字符串
      if (!attributes.MaintanceDataJson) {
        attributes.MaintanceDataJson = ''
      }

      console.log('保存前的属性数据:', attributes)

      if (isEditing.value && selectedFeatureId.value) {
        // 更新现有要素
        const updateFeature = new Graphic({
          attributes: {
            OBJECTID: selectedFeatureId.value,
            ...attributes,
          },
        })

        const result = await featureLayer.applyEdits({
          updateFeatures: [updateFeature],
        })

        if (result.updateFeatureResults.length > 0) {
          ElMessage.success('景点已更新')
          showFormDrawer.value = false
          await loadFeatures()
        } else {
          ElMessage.error('更新景点失败')
        }
      } else {
        // 创建新要素
        if (!newPointGeometry) {
          ElMessage.warning('无法获取景点位置')
          return
        }

        const graphic = new Graphic({
          geometry: newPointGeometry,
          attributes: attributes,
        })

        const result = await featureLayer.applyEdits({
          addFeatures: [graphic],
        })

        if (result.addFeatureResults.length > 0) {
          ElMessage.success('景点已添加')
          showFormDrawer.value = false
          newPointGeometry = null
          await loadFeatures()
        } else {
          ElMessage.error('添加景点失败')
        }
      }
    } catch (error) {
      console.error('保存景点失败', error)
      ElMessage.error('保存景点失败')
    }
  })
}

// 返回首页
const goBack = () => {
  router.push('/')
}

// 页面加载完成后初始化地图
onMounted(() => {
  initMap()
})
</script>

<style scoped lang="scss">
.scenic-point-crud-container {
  padding: 20px;
}

.scenic-point-crud-header {
  margin-bottom: 20px;
  background-color: #fff;
  padding: 15px 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  border-left: 4px solid #409eff;
}

.header-actions {
  margin-bottom: 15px;
}

.scenic-point-crud-header h1 {
  font-size: 24px;
  color: #303133;
  margin-bottom: 8px;
}

.scenic-point-crud-header p {
  color: #606266;
  font-size: 14px;
}

.map-container {
  height: 500px;
  width: 100%;
  position: relative;
}

.map-card,
.action-card,
.feature-list-card {
  margin-bottom: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  overflow: hidden;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-input {
  width: 200px;
}

.action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.selected-feature-info {
  background-color: #f0f9eb;
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 20px;
  border-left: 4px solid #67c23a;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.selected-feature-info h3 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 16px;
  color: #303133;
}

.selected-feature-info p {
  margin: 5px 0;
  color: #606266;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
  gap: 10px;
}

.feature-form {
  padding: 20px;
}

.existing-photo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  padding: 10px;
  background-color: #f8f8f8;
}

.remove-photo-btn {
  margin-top: 10px;
}

/* 详情页样式 */
.feature-details {
  padding: 20px;
}

.details-actions {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.no-feature-selected {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}

/* 状态指示器 */
.status-indicator {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 10px 20px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.pulse-dot {
  width: 10px;
  height: 10px;
  background-color: #f56c6c;
  border-radius: 50%;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(0.8);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    transform: scale(0.8);
    opacity: 0.8;
  }
}

/* 响应式调整 */
@media (max-width: 768px) {
  .scenic-point-crud-container {
    padding: 10px;
  }

  .map-container {
    height: 350px;
  }

  .search-input {
    width: 150px;
  }
}
</style>
